<template>
  <!-- 隐私保护指引弹框 -->
  <view class="privacy" v-if="showPrivacy">
    <view class="content">
      <view class="title">隐私保护指引</view>
      <view class="des">
        在使用当前小程序服务之前，请仔细阅读<text class="link" @tap="openPrivacyContract">{{ privacyContractName }}</text>。如你同意{{
        privacyContractName }}，请点击"同意"开始使用。
      </view>
      <view class="btns">
        <button class="item reject" @click="close1">拒绝</button>
        <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgreePrivacyAuthorization">
          同意
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'

const props = defineProps({
  showPrivacy: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close'])

const privacyContractName = ref('《XX小程序隐私保护指引》')

const openPrivacyContract = () => {
  uni.openPrivacyContract({
    fail: (error) => {
      console.log(error)
    }
  })
}

// 拒绝隐私协议
const close1 = () => {
  emit('privacyclose')
}

// 同意隐私协议
const handleAgreePrivacyAuthorization = () => {
  emit('privacyclose')
}
</script>


<style scoped>
.privacy {
  position: fixed;
  /* top: 0;
     right: 0; */
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  /* width: 632rpx; */
  padding: 48rpx;
  box-sizing: border-box;
  background: #fff;
  /* border-radius: 16rpx 16rpx 0 0; */
}

.content .title {
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 32rpx;
}

.content .des {
  font-size: 26rpx;
  color: #666;
  margin-top: 40rpx;
  text-align: justify;
  line-height: 1.6;
}

.content .des .link {
  color: #07c160;
  text-decoration: underline;
}

.btns {
  margin-top: 48rpx;
  display: flex;
  justify-content: center;
}

.btns .item {
  justify-content: space-between;
  width: 192rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  box-sizing: border-box;
  border: none;
}

.btns .reject {
  background: #f4f4f5 !important;
  color: #909399;
}

.btns .agree {
  margin-left: 24rpx;
  background: #07c160 !important;
  color: #fff;
}
</style>